<template>
  <div class="card-item">
    <nav class="top-box">
      <div class="adv-box">
        <h1>完成1单得9折优惠券</h1>
        <p>距本阶段结束<span class="black">2</span>天<span class="black">23</span>小时</p>
      </div>
      <div class="btn-box">去打车</div>
    </nav>
    <div class="discount-box">
      <div class="discount-inner">
        <div class="discount-wrap">
          <div class="discount-item" v-for="(item,index) in 10" :key="index">
            <p><span class="num">9</span>折</p>
            <p>完成第3单</p>
          </div>
        </div>
        <div class="progress-bar">
          <div class="progress-dot" v-for="(item,index) in 10" :key="index"></div>
        </div>
        <div class="unlock-wrap">
          <button class="unlock-btn" v-for="(item,index) in 10" :key="index">完单反券</button>
        </div>
      </div>

    </div>

    
  </div>
</template>

<script>
export default {
  
}
</script>

<style scoped>
.card-item{
  margin:0.24rem;
  /* border: 1px solid; */
}

.adv-box{
  margin: 0.24rem 0.36rem 0.39rem 0.36rem;
  font-size: 0.2rem;
}

.adv-box h1{
  font-size: 0.32rem;
}

.top-box{
  background-color:#FF00AA;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0.24rem 0.24rem 0 0;
}

.btn-box{
  background-color: bisque;
  color: goldenrod;
  border-radius: 2.4rem;
  text-align: center;
  line-height: 0.52rem;
  margin-right: 0.36rem;
  padding: 0.1rem 0.32rem 0.09rem 0.32rem;
}

.discount-box{
  box-shadow: 0rem 0.1rem 0.2rem 0rem rgba(0, 13, 51, 0.05);
  border-radius: 0.24rem;
  background-color:lightsalmon;
  position: relative;
  top:-0.24rem;
  overflow: auto;
}

.discount-wrap{
  padding: 0.32rem 0.6rem 0.23rem 0.6rem;
  white-space: nowrap;
}

.discount-item{
  width: 1.74rem;
  height: 1.14rem;
  background-color: #FFCCEE;
  color: #FF00AA;
  text-align: center;
  border-radius: 0.17rem;
  font-size: 0.2rem;
  margin-right: 0.32rem;
  display: inline-block;
  
}

.discount-item:last-child {
  margin-right: 0;
}

.num{
  font-size: 0.58rem;
}

.progress-bar{
  /* width: 100%; */
  display: inline-block;
  white-space: nowrap;
  /* margin: 0.18rem 0 0.16rem 0.35rem; */
  background-color: #F5F5F5;
  border-radius: 0.07rem;
  height: 0.18rem;
  margin: 0 0.35rem;
  line-height: 0.18rem;
  /* padding-left: 1.02rem; */
}

.progress-dot{
  display: inline-block;
  width: 0.18rem;
  height: 0.18rem;
  background-color: #C1C1C1;
  border:0.03rem solid rgba(255,255,255,1);
  border-radius: 0.17rem;
  margin-right: 1.87rem;
  box-sizing: border-box;
}
.progress-dot:first-child {
  margin-left: 1.02rem;
}

.progress-dot:last-child {
  margin-right: 1.02rem;
}

.unlock-wrap{
  white-space: nowrap;
  
}

.unlock-btn{
  display: inline-block;
  border: none;
  width: 1.16rem;
  height: 0.33rem;
  background-color: #F0F0F0;
  border-radius: 0.17rem;
  font-size: 0.18rem;
  margin: 0 0 0.19rem 0.88rem;
}

.discount-inner {
  display: inline-block;
}

</style>